* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

body {
display: flex;
min-height: 100vh;
background-color: #2c3e50;
color: white;
}

nav {
width: 60px;
padding: 20px 0;
background-color: #34495e;
display: flex;
flex-direction: column;
}

nav a {
color: white;
text-decoration: none;
padding: 10px 20px;
display: block;
}

.main {
flex-grow: 1;
padding: 20px;
}

.header-section {
position: relative;
height: 300px;
background-color: #34495e;
margin-bottom: 20px;
}

.header-section img {
width: 100%;
height: 100%;
object-fit: cover;
}

.user-info {
position: absolute;
top: 50px;
left: 50px;
display: flex;
align-items: center;
}

.user-info img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-right: 15px;
}

.user-info span {
font-size: 18px;
}

.user-info button {
background-color: #3498db;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}

.tabs {
display: flex; /* 启用 flex 布局 */
justify-content: center; /* 子元素水平居中 */
gap: 20px; /* 子元素之间的间距 */
margin-top: 20px;
}

.tabs span {
margin: 0 10px;
color: #bdc3c7;
}

.blog-previews {
display: flex;
gap: 20px;
}

.blog {
flex: 1;
background-color: #34495e;
padding: 20px;
}

.blog h3 {
color: #ecf0f1;
margin-bottom: 10px;
}

.blog p {
color: #bdc3c7;
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
}

.actions {
display: flex;
gap: 10px;
align-items: center;
}

.actions span {
color: #bdc3c7;
font-size: 12px;
}

aside {
width: 300px;
padding: 20px;
background-color: #34495e;
}

.calendar {
margin-top: 20px;
}

.calendar table {
width: 100%;
border-collapse: collapse;
}

.calendar th,
.calendar td {
border: 1px solid #2c3e50;
padding: 8px;
text-align: center;
}

.calendar th {
background-color: #2c3e50;
}

.links {
margin-top: 20px;
}

.links button {
display: block;
width: 100%;
padding: 5px;
margin: 5px 0;
background-color: #34495e;
color: white;
border: none;
cursor: pointer;
text-align: left;
}